import React from 'react';
import ProCard from '@ant-design/pro-card';
import ProTable from '@ant-design/pro-table';
import styles from '@/pages/trade/Item/index.less';
import { connect } from 'umi';
import moment from 'moment';

const valueEnum = {
  0: '创建',
  3: '转让',
  7: '转让',
  5: '授权',
};

const columns = [
  {
    title: '交易类型',
    dataIndex: 'type',
    valueEnum,
  },
  {
    title: '出售方',
    render: (_, record) => {
      return record.from.username;
    },
  },
  {
    title: '购买方',
    render: (_, record) => {
      return record.to.username;
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
    valueType: 'money',
  },
  {
    title: '交易时间',
    dataIndex: 'blockTime',
    render: (_, record) => {
      return moment.unix(record.blockTime).format('YYYY-MM-DD HH:mm:ss');
    },
  },
];

const TransCard = (props) => {
  const { item, trades } = props;

  return (
    item && (
      <ProCard className={styles.itemCard} title="交易记录" headerBordered>
        <ProTable
          rowKey="id"
          options={false}
          search={false}
          columns={columns}
          dataSource={trades}
        />
      </ProCard>
    )
  );
};

export default connect(({ item }) => ({
  item: item.item,
}))(TransCard);
